<template>
  <div>
     <el-page-header @back="goBack" content="分包付款申请">
       </el-page-header>
            <el-divider></el-divider>
    <div>
        <span>基本信息</span>
        <el-divider></el-divider>
        <el-form ref="form" :model="subcontracts"  style="width: 100%;" label-width="100px">
          <el-container>
  <el-form-item label="日期">
    <el-input v-model="subcontracts.updateDate" type="date" readonly style="width: 280px;"></el-input>
  </el-form-item>
  <el-form-item label="付款编号">
    <el-input v-model="subcontracts.fkId" readonly style="width: 280px;"></el-input>
  </el-form-item>
  <el-form-item label="付款名称">
    <el-input v-model="subcontracts.paymentName"  style="width: 280px;"></el-input>
  </el-form-item>
  <el-form-item label="所属项目">
    <el-input v-model="subcontracts.projectName" readonly style="width: 280px;"
                                  @focus="projectDialogVisible=true"></el-input>
                        <el-input v-model="subcontracts.pId" v-show="false"></el-input>
  </el-form-item>
  </el-container>
  <el-container>
    <el-form-item label="合同名称">
    <el-input v-model="subcontracts.contractName" readonly style="width: 280px;"></el-input>
    <el-input v-model="subcontracts.conId" v-show="false"></el-input>
  </el-form-item>
  <el-form-item label="分包单位">
    <el-input v-model="subcontracts.providerName" readonly style="width: 280px;"></el-input>
                        <el-input v-model="subcontracts.proId" v-show="false"></el-input>
  </el-form-item>
  <el-form-item label="合同金额">
    <el-input v-model="subcontracts.contractAmount" type="number" readonly style="width: 280px;"></el-input>
  </el-form-item>
  <el-form-item label="已付款金额">
    <el-input v-model="subcontracts.agreeAmount" type="number" readonly  style="width: 280px;"></el-input>
  </el-form-item>
    </el-container>
    <el-container>
      <el-form-item label="付款类型">
    <el-select v-model="subcontracts.fkType" placeholder=""  style="width: 280px;">
      <el-option label="支付宝" value="支付宝"></el-option>
      <el-option label="按进度付款" value="按进度付款"></el-option>
      <el-option label="现金" value="现金"></el-option>
      <el-option label="银行" value="银行"></el-option>
    </el-select>
    </el-form-item>
    <el-form-item label="付款金额">
    <el-input v-model="subcontracts.fkAmount" type="number" @blur="money"  style="width: 280px;"></el-input>
  </el-form-item>
    <el-form-item label="金额大写">
    <el-input v-model="subcontracts.agreeUpper"  readonly style="width: 280px;"></el-input>
  </el-form-item>
      <el-form-item label="罚款">
    <el-input v-model="subcontracts.penalty" type="number"  style="width: 280px;"></el-input>
  </el-form-item>
  
  </el-container>
  <el-container>
    <el-form-item label="扣款">
    <el-input v-model="subcontracts.withhold" type="number"  style="width: 280px;"></el-input>
  </el-form-item>
  <el-form-item label="开户行名称">
    <el-input v-model="subcontracts.bankOfDeposit" readonly style="width: 280px;"
                                  @focus="bankDialogVisible=true"></el-input>
                        <el-input v-model="subcontracts.bankId" v-show="false"></el-input>
  </el-form-item>
  <el-form-item label="银行账户">
    <el-input v-model="subcontracts.account"   style="width: 280px;"></el-input>
  </el-form-item>
  <el-form-item label="经办人">
    <el-input v-model="subcontracts.name" readonly style="width: 280px;"
                                  @focus="empDialogVisible=true"></el-input>
                        <el-input v-model="subcontracts.eId" v-show="false"></el-input>
  </el-form-item>
  </el-container>
  <el-form-item label="备注">
    <el-input v-model="subcontracts.comment" type="textarea" style="width: 1420px;"></el-input>
  </el-form-item>
</el-form>
    </div>
      <multi-file-upload
                style="width: 90%;margin: 20px auto"
                title="附件"
                action="http://localhost/uploads"
                :params="{folder: 'subcontract'}"
                :headers="{token: token}"
                :show-button="!checkRoute"
                @uploadSuccess="handleUploadSuccess"
                :parent-file-list="fileList"
        ></multi-file-upload>
    <el-divider></el-divider>
        <div style="width: 100%;margin-left: 90px">
            <el-button type="primary" @click="addLaborSubcontract" >确认提交</el-button>
        </div>

       <el-dialog
                title="项目选择"
                :visible.sync="projectDialogVisible"
                width="70%">
                  <project-info @row="handleSetProject" v-if="projectDialogVisible"></project-info>
        </el-dialog>

        <el-dialog
                title="开户行选择"
                :visible.sync="bankDialogVisible"
                width="70%">
                  <bank-list @row="handleSetBank" v-if="bankDialogVisible"></bank-list>
        </el-dialog>

        <el-dialog
                title="签订人选择"
                :visible.sync="empDialogVisible"
                width="70%">
            <emp-list @row="handleSetEmp" v-if="empDialogVisible"></emp-list>
        </el-dialog>
  </div>
</template>

<script>
import {DateUtil} from "../../model/common/DateUtil.js"
import ProjectInfo from '../wyh/ProjectInfoList.vue' 
import EmpList from '../wyh/EmpList.vue'
import BankList from '../wyh/BankList.vue'
import bankModel from '../../model/wyh/bankModel.js'
const em=new  bankModel()
export default {
  components: {
            ProjectInfo,
            EmpList,
            BankList
        },
    data() {
        return {
            subcontracts:{
              fkId:'',
              updateDate:DateUtil.today(),
            },//分包合同数据
            active:1,
            fileList:[],
            projectDialogVisible: false,
            bankDialogVisible:false,
            empDialogVisible:false,
            contractTypes:[],
        }
    },
    computed: {
            token: {
                get() {
                    return this.$store.state.token
                }
            },
            checkRoute(){
                return Object.keys(this.$route.params).length != 0
            }
        },
    methods:{
      getMaxCode() {
                em.getMaxCode().then(response => {
                    if (response.data.code === 0) {
                        this.subcontracts.fkId = response.data.data
                    }
                })
            },
      goBack(){
        this.active=1
      },
      handleUploadSuccess(ids){
                this.subcontracts.attachIds = ids
            },
            //转换器
            toChies(values){//形参
                let len=values.length//统计出长度
                let arr=[];

                let chin_list=['零','壹','贰','叁','肆','伍','陆','柒','捌','玖']//所有的数值对应的汉字

                let chin_lisp=['仟','佰','拾','亿','仟','佰','拾','万','仟','佰','拾']//进制

                for(let i=0;i<len;i++){
                    arr.push(parseInt(values[i]));		//输入的数据按下标存进去   存进去的只是数字
                    arr[i]=chin_list[arr[i]]			//是根据我们输入的输入的数字，对应着我们的chin_list这个数组
                }//123['壹','佰','贰','拾','叁']

                for(let i=len-1,j=1;i>0;i--){//i =2	1		//倒序		为了添加进制，方便我们去观看
                    arr.splice(i,0,chin_lisp[chin_lisp.length-j++])	//j=2
                }
                console.log(arr)

                arr=arr.join('')
                if(len>=1){
                    arr+='元整'
                }
                return arr
            },

            //金额转换
            money(){
                var money = this.subcontracts.fkAmount;
                var Maxmoney = this.toChies(money);
                console.log(Maxmoney)
                this.subcontracts.agreeUpper=Maxmoney
            },
     handleSetProject(row) {
      console.log(row.id);
                this.subcontracts.pId = row.id
                this.subcontracts.projectName = row.projectName
                this.subcontracts.conId = row.conId
                this.subcontracts.contractName = row.contractName
                this.subcontracts.proId = row.proId
                this.subcontracts.providerName = row.providerName
                this.subcontracts.contractAmount = row.contractAmount
                this.subcontracts.agreeAmount = row.depositAmount
                this.projectDialogVisible = false
            },
            handleSetBank(row){
                this.subcontracts.bankId = row.bankId
                this.subcontracts.bankOfDeposit = row.bankOfDeposit
                this.subcontracts.account = row.account
                this.bankDialogVisible = false
            },
    handleSetEmp(row){
      console.log(row.id);
                this.subcontracts.eId = row.id
                this.subcontracts.name = row.name
                this.empDialogVisible = false
    },
    addLaborSubcontract(){
      em.addLaborSubcontract(this.subcontracts).then(()=>{
        alert("添加成功")
        location.reload()
      })
    }
    },
    created(){
      this.getMaxCode()
    }
}
</script>

<style>

</style>